<template>
  <div class="mine">
    <MyHead title="个人中心" :back="false"></MyHead>
    <div class="mine-top">
      <img :src="Avatar" alt="" class="avatar" />
      <div class="info" v-if="userInfo">
        <span> {{ userInfo.username }}</span> /
        <span> {{ userInfo.phone }}</span>
      </div>
      <div v-else class="info">
        <span @click="gotowhere({ name: 'login' })">立即登录</span>
      </div>
    </div>
    <div class="mydingdan">
      <div class="ddtop">
        <h5>我的订单</h5>
        <p>查看全部订单</p>
      </div>
      <div class="dddibu">
        <ul>
          <li>
            <img
              src="https://i2.hdslb.com/bfs/openplatform/201803/im.WerRKKLmWs.png"
              alt=""
            />
            <p>全部订单</p>
          </li>
          <li>
            <img
              src="https://i1.hdslb.com/bfs/openplatform/201803/imLWbQbqgr3x..png"
              alt=""
            />
            <p>待付款</p>
          </li>
          <li>
            <img
              src="https://i0.hdslb.com/bfs/openplatform/201907/imnV7no1W5sZU1564402911661.png"
              alt=""
            />
            <p>待开补款</p>
          </li>
          <li>
            <img
              src="	https://i2.hdslb.com/bfs/openplatform/201803/imvT2bTr8ytUk.png"
              alt=""
            />
            <p>待收货</p>
          </li>
          <li>
            <img
              src="https://i1.hdslb.com/bfs/openplatform/201803/imGfmd17bvOKI.png"
              alt=""
            />
            <p>待评价</p>
          </li>
          <li>
            <img
              src="https://i0.hdslb.com/bfs/kfptfe/floor/vane22a98f69050c42f788d4ce327e4131bd.png"
              alt=""
            />
            <p>退换/售后</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="mychangyong">
      <div class="cytop">
        <h5>常用功能</h5>
      </div>
      <div class="cydibu">
        <ul>
          <li>
            <img
              src="https://i2.hdslb.com/bfs/openplatform/202009/IdySnhRh1601378676549.png"
              alt=""
            />
            <p>地址管理</p>
          </li>
          <li>
            <img
              src="	https://i0.hdslb.com/bfs/openplatform/202009/ZdBhWZgI1601379003687.png"
              alt=""
            />
            <p>购买人信息</p>
          </li>
          <li>
            <img
              src="https://i0.hdslb.com/bfs/openplatform/202009/lccKKg4t1601378927204.png"
              alt=""
            />
            <p>电子票</p>
          </li>
          <li>
            <img
              src="https://i0.hdslb.com/bfs/openplatform/202009/rcO12EB81601378294419.png"
              alt=""
            />
            <p>建议反馈</p>
          </li>
          <li>
            <img
              src="	https://i1.hdslb.com/bfs/openplatform/202009/INZ0xwh51601378639039.png"
              alt=""
            />
            <p>在线客服</p>
          </li>
          <li>
            <img
              src="https://i1.hdslb.com/bfs/openplatform/202104/SsYlKMM61619240115680.png"
              alt=""
            />
            <p>异想少女</p>
          </li>
          <li>
            <img
              src="https://i2.hdslb.com/bfs/openplatform/202012/4x0Lb4GV1608194219914.png"
              alt=""
            />
            <p>福利站</p>
          </li>
          <li>
            <img
              src="https://i0.hdslb.com/bfs/kfptfe/floor/23c3f17f23426c58cbf90ae87f59b5f4314f304e.png"
              alt=""
            />
            <p>原型大赛</p>
          </li>
          <li>
            <img
              src="https://i0.hdslb.com/bfs/kfptfe/floor/3941b01676fb845efa9c7e3ad4d839dd6fb59c74.png"
              alt=""
            />
            <p>工房集市</p>
          </li>
          <li>
            <img
              src="https://i0.hdslb.com/bfs/kfptfe/floor/c9255230e3f427477292b7dafb582bcdb4f52eda.png"
              alt=""
            />
            <p>服务单</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="mylist">
      <van-cell-group>
        <template v-if="userInfo">
          <van-cell icon="like-o" title="点赞" value="3" is-link to="/mylike" />
          <van-cell
            icon="star-o"
            title="收藏"
            value="7"
            is-link
            to="/mycollect"
          />
          <van-cell
            icon="comment-o"
            title="评论"
            value="5"
            is-link
            to="/mycomment"
          />
          <van-cell icon="hot-o" title="订单" value="4" is-link to="/myorder" />
          <van-cell
            icon="closed-eye"
            title="修改密码"
            is-link
            to="/changepass"
          />
          <van-cell icon="shopping-cart-o" title="购物车" to="/cart" is-link />
        </template>
        <van-cell
          icon="share-o"
          title="清除缓存"
          :value="cache + 'M'"
          @click="clearCache"
        />
        <van-cell icon="setting-o" title="设置" />
      </van-cell-group>
    </div>
    <div class="logout" style="margin: 16px" v-if="userInfo">
      <van-button block round @click="logoutAction">退出登录</van-button>
    </div>
    <van-overlay :show="show" class="mylay">
      <div class="mask" v-if="show">
        <Dao
          :styleobj="{ position: 'relative', left: 0, right: 0 }"
          :gotopage="clearEnd"
        ></Dao>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Avatar from "@/assets/images/Pikachu.jpg";
export default {
  data() {
    return {
      Avatar,
      cache: Math.floor(Math.random() * 100),
      show: false,
    };
  },
  methods: {
    clearEnd() {
      this.$toast("缓存清除完毕");
      this.show = false;
      this.cache = 0;
    },
    // 清除缓存
    clearCache() {
      if (this.cache == 0) {
        this.$toast("暂无缓存");
      } else {
        this.show = true;
      }
    },
    logoutAction() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "你真的要退出登录吗? 亲.",
        })
        .then(() => {
          // on confirm
          this.changeUserInfo(null);
          // this.$store.commit("")
          this.changeMyCarts([]);
          localStorage.removeItem("lgaccount");
          localStorage.removeItem("lgphone");
        })
        .catch(() => {
          // on cancel
        });
    },
    async getUserInfoByName() {
      let res = await this.$ajax.findUser({
        username: localStorage.getItem("lgaccount"),
      });
      this.changeUserInfo(res[0]); //用户信息
      // this.getMyCarts({phone:this.userInfo.phone}) //根据用户手机号获取我的购物车信息
    },
  },
  mounted() {
    if (localStorage.getItem("lgaccount")) {
      this.getUserInfoByName();
    }

    // this.$ajax.getHome().then((res) => {
    //   console.log(res);
    // });
  },
};
</script>




<style lang="scss" scoped>
.mine {
  padding-bottom: 48px;
  width: 100%;
  min-height: 100vh;
  background: #f4f4f4;
  position: relative;
  &-top {
    text-align: center;
    // margin-top: 44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background: url(https://s1.hdslb.com/bfs/static/mall-c/static/img/login.5707d77.png);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fb7299;
    .avatar {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .info {
      font-size: 20px;
      font-weight: 500;
    }
  }
  &-two {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .item {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      .value {
        color: #191a1b;
        font-size: 17px;
      }
      .label {
        font-size: 13px;
        color: #797d82;
      }
    }
  }

  .mylay {
    z-index: 1001;
    .mask {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.mydingdan,
.mychangyong {
  margin: 6px 4px 6px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 6px;
}
.ddtop,
.cytop {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}
.ddtop h5,
.cytop h5 {
  font-size: 16px;
  color: #fb7299;
}
.ddtop p {
  color: #797d82;
}
.dddibu,
.cydibu {
  width: 100%;
  height: 100%;
}
.dddibu ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dddibu ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dddibu p {
  color: #757575;
  padding-top: 5px;
}
.cydibu p {
  color: #757575;
  padding-top: 5px;
  padding-bottom: 6px;
}
.cydibu ul {
  display: flex;
  // justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.cydibu ul li {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cydibu ul li img {
  width: 32px;
}
</style>
    
    